<head>
  <title>Todos</title>
</head>

<body>
  <div id="top-tag-filter">
    {{> tag_filter}}
  </div>

  <div id="main-pane">
    {{> todos}}
  </div>

  <div id="side-pane">
    {{> lists}}
  </div>
</body>

<template name="lists">
  <h3>Todo Lists</h3>
  {{#if loading}}
    <div id="lists">Loading...</div>
  {{else}}
    <div id="lists">
      {{#each lists}}
        <div class="list {{selected}}">
          {{#if editing}}
            <div class="edit">
              <input class="list-name-input" id="list-name-input" type="text" value="{{name}}" />
            </div>
          {{else}}
            <div class="display">
              <a class="list-name {{name_class}}" href="/{{_id}}">
                {{name}}
              </a>
            </div>
          {{/if}}
        </div>
      {{/each}}
    </div>
    <div id="createList">
      <input type="text" id="new-list" placeholder="New list" />
    </div>
  {{/if}}
</template>

<template name="todos">
  {{#if any_list_selected}}
    <div id="items-view">
      {{#if loading}}
        Loading...
      {{else}}
        <div id="new-todo-box">
          <input type="text" id="new-todo" placeholder="New item" />
        </div>
        <ul id="item-list">
          {{#each todos}}
            {{> todo_item}}
          {{/each}}
        </ul>
      {{/if}}
    </div>
  {{/if}}
</template>

<template name="todo_item">
  <li class="todo {{done_class}}">
    {{#if editing}}
      <div class="edit">
        <input id="todo-input" type="text" value="{{text}}" />
      </div>
    {{else}}
      <div class="destroy"></div>
      <div class="display">
        <input class="check" name="markdone" type="checkbox" checked={{done}} />
        <div class="todo-text">{{text}}</div>
      </div>
    {{/if}}
    <div class="item-tags">
      {{#each tag_objs}}
        <div class="tag removable_tag">
          <div class="name">{{tag}}</div>
          <div class="remove"></div>
        </div>
      {{/each}}
      {{#if adding_tag}}
        <div class="tag edittag">
          <input type="text" id="edittag-input" value="" />
        </div>
      {{else}}
        <div class="tag addtag">
          +tag
        </div>
      {{/if}}
    </div>
  </li>
</template>

<template name="tag_filter">
  <div id="tag-filter" class="tag-list">
    <div class="label">Show:</div>
    {{#each tags}}
      <div class="tag {{selected}}">
        {{tag_text}} <span class="count">({{count}})</span>
      </div>
    {{/each}}
  </div>
</template>
